<script setup>
import { useRoute, useRouter } from "vue-router";
import { detailaction as detailactionApi } from "@/api/goods";
import { onBeforeMount, ref } from "vue";
import { getImageUrl } from "@/utils/index";
import NavBar from "@/components/NavBar.vue";
const route = useRoute();
const router = useRouter();
const goodsId = route.query.id;
const goodsDetail = ref({});

const getGoodsDetail = async () => {
  const res = await detailactionApi({
    id: goodsId,
    openId: localStorage.getItem("openId"),
  });
  goodsDetail.value = res;
};

onBeforeMount(() => {
  getGoodsDetail();
});

const handleBack = () => {
  router.go(-1);
};
</script>

<template>
  <div class="goods-detail-container">
    <van-sticky>
      <NavBar title="产品详情" left-arrow @leftclick="handleBack"></NavBar>
    </van-sticky>
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="item in goodsDetail.gallery" :key="item.id">
          <img class="img" :src="item.img_url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goods-extra-info">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <div class="info" v-if="goodsDetail.info">
      <div class="title">{{ goodsDetail.info.name }}</div>
      <div class="goods_brief">{{ goodsDetail.info.goods_brief }}</div>
      <div class="price">￥{{ goodsDetail.info.retail_price }}</div>
      <van-divider />
      <div>
        <van-cell title="请选择规格数量">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <img
              class="my-right-icon"
              :src="getImageUrl('images/choose-detail-icon.png')"
              alt=""
            />
          </template>
        </van-cell>
      </div>
    </div>
    <div class="goods-attribute">
      <h2>商品参数</h2>
      <div
        class="goods-attribute-item"
        v-for="item in goodsDetail.attribute"
        :key="item.name"
      >
        <span class="name">{{ item.name }}</span>
        <span class="attr-value">{{ item.value }}</span>
      </div>
    </div>
    <div v-if="goodsDetail.info" class="goods-content">
      <div v-html="goodsDetail.info.goods_desc"></div>
    </div>
    <h1 class="peoples-view-title">大家都在看</h1>

    <div class="product-container">
      <div
        class="product-item"
        v-for="product in goodsDetail.productList"
        :key="product.id"
      >
        <van-image class="product-img" :src="product.list_pic_url" />
        <div class="product-name">
          {{ product.name }}
        </div>
        <div class="product-price">¥{{ product.retail_price }}</div>
      </div>
    </div>

    <van-action-bar>
      <van-action-bar-icon text="">
        <template #icon>
          <img
            class="my-icon"
            :src="getImageUrl('images/collected-detail-icon.png')"
            alt=""
          />
        </template>
      </van-action-bar-icon>
      <van-action-bar-icon text="" :badge="goodsDetail.allnumber">
        <template #icon>
          <img
            class="my-icon"
            :src="getImageUrl('images/cart-detail-icon.png')"
            alt=""
          />
        </template>
      </van-action-bar-icon>

      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<style scoped lang="scss">
@use "@/assets/common.scss" as *;
.goods-detail-container {
  background-color: #f8f8f8;
  padding-bottom: 132px;
  .img {
    width: 750px;
    height: 691px;
    display: block;
  }
  .goods-extra-info {
    width: 750px;
    height: 100px;
    display: flex;
    background: #434343;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    .item {
      position: relative;
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 400;
      &::before {
        width: 11px;
        height: 11px;
        content: "";
        display: block;
        border: 3px solid rgba(183, 166, 115, 1);
        border-radius: 50%;
        position: absolute;
        left: -18px;
        top: 10px;
      }
    }
  }
  .info {
    width: 710px;
    margin: 0 auto;
    background-color: #fff;
    padding: 34px 30px 0 30px;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 38px;
      color: #333333;
      font-weight: 500;
    }
    .van-divider {
      margin-top: 46px;
      margin-bottom: 0;
    }
    .goods_brief {
      font-family: PingFangSC-Regular;
      font-size: 26px;
      color: #999999;
      margin-top: 7px;
    }
    .price {
      margin-top: 12px;
      font-family: PingFangSC-Medium;
      font-size: 34px;
      color: #9e4242;
      font-weight: 500;
    }
    .van-cell {
      padding-left: 0px;
    }
    .my-right-icon {
      width: 30px;
      height: 30px;
    }
  }
  .goods-attribute {
    width: 710px;
    margin: 20px auto 0;
    background-color: #fff;
    padding: 40px 34px;
    box-sizing: border-box;
    h2 {
      font-family: PingFangSC-Medium;
      font-size: 38px;
      color: #333333;
      font-weight: 500;
    }
    .goods-attribute-item {
      margin-top: 34px;
      height: 68px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        @include textOverFlow;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #666666;
      }
      .attr-value {
        @include textOverFlow;
        width: 509px;
        height: 100%;
        line-height: 68px;
        background: #f8f8f8;
        border: 1px solid rgba(223, 223, 223, 1);
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #333333;
        padding-left: 77px;
        box-sizing: border-box;
      }
    }
  }
  .goods-content {
    background-color: #fff;
    width: 750px;
    margin-top: 20px;
    :deep(img) {
      width: 100%;
    }
  }

  .peoples-view-title {
    font-family: PingFangSC-Medium;
    font-size: 38px;
    color: #333333;
    font-weight: 500;
    padding: 46px 0;
    text-align: center;
  }
  .product-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
    .product-item {
      margin-bottom: 44px;
      .product-img {
        width: 350px;
        height: 350px;
        background-color: #fff;
      }
      .product-name {
        @include textOverFlow;
        margin-top: 17px;
        width: 350px;
        font-family: PingFangSC-Medium;
        color: #333333;
        font-weight: 500;
        font-size: 26px;
      }
      .product-price {
        margin-top: 5px;
        font-family: PingFangSC-Regular;
        color: #9e4242;
        font-size: 26px;
      }
    }
    .last-link {
      align-self: flex-start;
      width: 350px;
      height: 350px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .link-title {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #666666;
      }
      .next-icon {
        margin-top: 21px;
        width: 58px;
        height: 58px;
      }
    }
  }
  .van-action-bar {
    height: 132px;
    .van-action-bar-icon {
      width: 140px;
    }
    :deep(.van-badge--top-right) {
      top: 8px;
      right: 6px;
    }
  }
  .my-icon {
    width: 58px;
    height: 58px;
  }
}
</style>
